<!-- 1 定义组件模版 -->
<template>
    <div>
        介绍js的知识
        <div>
            <div class="left jsblock">
                <ol>
                    <li><router-link to="/js/chapter1">第一章节</router-link></li>
                    <li><router-link to="/js/chapter2">第二章节</router-link></li>
                </ol>
            </div>

            <div class="right jsblock">
                <router-view></router-view>
            </div>

        </div>

    </div>
</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="JSComponent">
import { ref } from 'vue'

</script>


<!-- 3 定义样式 -->
<style scoped>
.jsblock {
    display: inline-block;

    min-height: 400px;
    border: solid 1px red;
    vertical-align: top;
}

.left {
    width: 200px;
    margin-left: 10px
}

.right {
    width: 570px;
    margin-left: 10px;
}
</style>